<template>
  <div>
    <!-- <slot name="icon">默认数据</slot> -->
    <!-- <slot>默认数据</slot> -->
    <!-- 具名slot -->
    <!-- <slot name="myBtn">默认数据</slot> -->
    <ul>
      <li v-for="item of picData" :key="item.id">
        <div>
          <h1>{{ item.title }}</h1>
          <!-- slot可以通过属性传递数据 -->
          <!-- props是一个slot传递数据的集合，名称可以自定义 -->
          <slot :item="item">默认数据</slot>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
/**
 * 插槽 slot 内容占位标签
 *
 * slot 可以替换为 文本、HTML、组件
 */
export default {
  name: "Slot",
  props: ["text"],
  data() {
    return {
      picData: [
        {
          id: 1,
          title: "er",
          desc: "321fdsdfasdasda123213",
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D98371021%2C1121096365%26fm%3D253%26app%3D120%26f%3DJPEG%3Fw%3D1200%26h%3D800&refer=http%3A%2F%2Fimg2.baidu.com&app=2002&size=w300&q=a80&n=0&g=0n&fmt=jpeg?sec=1645282006&t=dd54668515c2370cbfb8bff166dde8ef",
        },
        {
          id: 2,
          title: "er",
          desc: "321fdsdfasdasda123213",
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D98371021%2C1121096365%26fm%3D253%26app%3D120%26f%3DJPEG%3Fw%3D1200%26h%3D800&refer=http%3A%2F%2Fimg2.baidu.com&app=2002&size=w300&q=a80&n=0&g=0n&fmt=jpeg?sec=1645282006&t=dd54668515c2370cbfb8bff166dde8ef",
        },
        {
          id: 3,
          title: "er",
          desc: "321fdsdfasdasda123213",
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D98371021%2C1121096365%26fm%3D253%26app%3D120%26f%3DJPEG%3Fw%3D1200%26h%3D800&refer=http%3A%2F%2Fimg2.baidu.com&app=2002&size=w300&q=a80&n=0&g=0n&fmt=jpeg?sec=1645282006&t=dd54668515c2370cbfb8bff166dde8ef",
        },
        {
          id: 4,
          title: "er",
          desc: "321fdsdfasdasda123213",
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D98371021%2C1121096365%26fm%3D253%26app%3D120%26f%3DJPEG%3Fw%3D1200%26h%3D800&refer=http%3A%2F%2Fimg2.baidu.com&app=2002&size=w300&q=a80&n=0&g=0n&fmt=jpeg?sec=1645282006&t=dd54668515c2370cbfb8bff166dde8ef",
        },
      ],
    };
  },
};
</script>
<style>
</style>